在全域設定中，除主題(theme)及設定外，也有幾個常用的可選設定(options)在此篇介紹

1. Ripple
   中文表示為「波紋」，即設定後會加上波紋的動畫，較常見的是在按鈕被點擊的時候。此設定預設無，透過全域設定在 main.js 內可開啟此動畫效果。

   import { createApp } from "vue";
   import PrimeVue from "primevue/config";
   const app = createApp(App);
   
   app.use(PrimeVue, { ripple: true }); // 加上波紋動畫效果
   

2. InputVariant

   將 inputVariant 設為 filled，表可將所有與輸入框相關的元件，其框內背景色填入顏色樣式。預設為 outlined 。

   app.use(PrimeVue, { inputVariant: "filled" }); // 填入背景色
   

   嘗試加上 InputText、Select、DatePicker 元件檢視該效果，可看到元件上都加上 background 背景色。

   

   // InputText、DatePicker
   .p-inputtext.p-variant-filled {
       background: var(--p-inputtext-filled-background);
   }
   // Select
   .p-select.p-variant-filled {
       background: var(--p-select-filled-background);
   }
   

   [補充 1] 若特定輸入框不須設定 filled，在個別元件上可設定為 outlined

   <InputText type="text" variant="outlined" />
   

   [補充 2] 若未在全域設定 filled(預設為 outlined)，在個別元件上可設定為 filled

   <InputText type="text" variant="filled" />
   

3. Locale

   • 官方有提供說明可在 main.js 內設定對應字詞的對照表

   // 官方文件說明 
   app.use(PrimeVue, {
       locale: {
           accept: 'Aceptar',
           reject: 'Rechazar',
           //...
       }
   });
   

   • 另有提供中文對照檔，可透過檔案載入進行設定。

   以下說明對照檔載入及設定方法：

   下載中文對照 json 檔，並在 Vite 專案下新增 locale 資料夾，並將 json 檔放入該資料夾內。
   
   在 main.js 中引入該 json，並使用 locale 屬性設定， 官方文件中是直接在 locale 下設定對照詞彙，透過該 json 檔須再指到 zh-TW 底下的物件。

   // zh-TW.json
   {
     "zh-TW": {
       "accept": "是",
       "addRule": "增加規則",
       "am": "上午",
       "apply": "應用",
       //...
     }
   }
   // 最終在 main.js 設定
   import zhTW from '@/locale/zh-TW.json'
   app.use(PrimeVue, { locale: zhTW['zh-TW'], ... })
   

   

參考連結：

1. https://primevue.org/configuration/
2. https://primevue.org/inputtext/
3. https://github.com/primefaces/primelocale